<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>查询页面</title>
  <script src='/js/jquery-3.6.4.min.js'></script>
  <link href="/js/jquery-ui-1.13.2/jquery-ui.min.css" rel="stylesheet">
  <script src='/js/jquery-ui-1.13.2/jquery-ui.min.js'></script>
  <style>
	  #menu {
	    position: absolute;
	    background-color: #fff;
	    border: 1px solid #ccc;
	    padding: 10px;
	    display: none;
	  }
    /* 设置 div 元素的样式 */
    .container {
        border: 1px solid #ccc;
        border-radius: 5px;
        padding: 5px;
        width: 98%;
        background-color: #f8f8f8;
        color: #333;
        box-shadow: 3px 3px 3px #888888;
        margin-bottom:3px;
    }
    
    /* 设置 title 的样式 */
    .title {
      border-bottom: 1px dotted black;
      background-color: #f8f8a8;
    }
    
    /* 设置 content 的样式 */
    .content {
        
    }
    
    /* 设置 remark 的样式 */
    .remark {
       border-top: 1px dotted black;
    }
    
    #yao {
        position: absolute;
        top: 100px;
        left: 100px;
        z-index: 9999;
        padding: 10px;
        width:1000px;
        height:500px;
        overflow: auto;
        background-color: #fff;
        border-radius: 5px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        display: none;
      }
      
       .image-wrapper {
		  width: 500px;
		  height: 300px;
		  position: relative;
		  overflow: hidden;
		}
		
		.image-wrapper img {
		  position: absolute;
		  top: 50%;
		  left: 50%;
		  transform: translate(-50%, -50%);
		  max-width: 100%;
		  max-height: 100%;
		}
		
		 #tuimg {
		    position: absolute;
		    background-color: #fff;
		    border: 1px solid #ccc;
		    padding: 10px;
		    display: none;
		    
		  }
		  .sq{
		  	border: 1px solid #ccc;
		  }
		  #bq {
		    position: absolute;
		    background-color: #fff;
		    border: 1px solid #ccc;
		    padding: 10px;
		    display: none;
		    
		  }
</style>
</head>
<body>
  <div class="search-box">
    <input id='zhengids' style='display:none' ></input>
    <input id='zhengnames' style='display:none' ></input>
    <input id='shownames' style='width:30%;margin-bottom:2px' readonly placeholder='请选择症状'></input>
    <input type="text" id='keyword' style='width:30%;margin-bottom:2px' placeholder="输入关键词搜索(如果要搜索多个关键词，请用空格分开)...">
    <button id='backsearch'>搜索</button>
    <button id='backclean'>清空</button>
  </div>
  <div id="mydiv">
    <!-- 搜索结果展示区域 -->
  </div>
  
  <div id="menu">
	<div id="searchyao">
	  查询药物
	</div>
  </div>
  <div id="yao" ></div>
  
  <div id="bq">
	  <div><button style='float:right;' onclick='closeBq()'>X</button></div>
	  <input id='zhengids2' style='display:none' ></input>
	  <input id='zhengnames2' style='display:none' ></input>
	  <input id='shownames2' style='width:80%;margin-bottom:2px' placeholder='请选择症状'></input>
	  <textarea id='remark' style='width:97%;min-width:97%;min-height: 50%' ></textarea>
	  
	  <div style='clear:both'></div>
	</div>
  
  <div id="tuimg">
  <div><button style='float:right;' onclick='closeimg()'>X</button></div>
	 
	  <div class="image-wrapper">
	  <img alt="" id='showimg'  />
	  </div>
	  <div>
	  <textarea id='imgremark' name='imgremark' style='width:97%;min-width:97%;min-height: 50%' ></textarea></div>
	  
	  <div style='clear:both'></div>
 </div>

  <script>
    $(document).ready(function() {
   		$('#shownames').click(function() {
	   		var ids=$('#zhengids').val();
	   		var names=$('#zhengnames').val();
	   		var encodedStr = encodeURIComponent(names);
	   		// 打开子窗口
	   		window.open('zheng?ids='+ids+'&names='+encodedStr, 'newwindow', 'height=700, width=1000, top=50, left=50, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no')
   		});
   		$('#yao').draggable().resizable();
   		$('#tuimg').draggable().resizable();
   		$("#bq").draggable();
   		$("#bq").resizable();

   		$('#backclean').click(function() {
   	        $('#zhengids').val('');
		    $('#zhengnames').val('');
		    $('#shownames').val('');
   	        $('#mydiv').html('');
   	        $('#keyword').val('');
   		});
   		
      $('#backsearch').click(function() {
        // 获取搜索关键字
        var keyword = $('#keyword').val();
        var ids = $('#zhengids').val();
        var names=$('#zhengnames').val();
        var ht='';

        
        // 发送 AJAX 请求，搜索相关内容
        $.post('/search/search', encodeURIComponent(JSON.stringify({ 'keyword': keyword,'ids':ids,'names':names })), function(data) {
           var ja=data.data;
           
           ja.forEach(function(num, index, array) {
        	    var o=array[index];
        	    var remark=o.remark;
        	    var content=o.content;
        	    var bookname=o.bookname;
        	    var bq=o.bq;
        	    
        	    content=content.replace(new RegExp('@r@@n@', 'g'), '<br>');
        	    remark=remark.replace(new RegExp('@r@@n@', 'g'), '<br>');
        	    remark=remark.replace(new RegExp('@n@', 'g'), '<br>');
        	   
        	    ht+='<div class="container"><div class="title">'+bookname+' '+bq+'</div><div class="content">'+content+'</div><div class="remark">备注：'+remark+'</div></div>';
        	    
           });
          
           // 将搜索结果展示在页面上
           $('#mydiv').html(ht);
        });
      });
    });
    var bq = document.getElementById('bq');
    var remark =  document.getElementById('remark');
    var tuimg = document.getElementById('tuimg');
    var imgremark =  document.getElementById('imgremark');
    var showimg = document.getElementById("showimg");
    var isimgVisible = false;
    var imgid='';
    var isBqVisible = false;
    var bqid='';
        
    function setzhengdata(data){
   	 $('#zhengids').val(data.ids);
   	 $('#zhengnames').val(data.names); 

   	 $('#shownames').val(data.names.replace(new RegExp('@', 'g'), ' '));
    }

    var myDiv = document.getElementById('mydiv');
    var menu = document.getElementById('menu');
    var yao = document.getElementById('yao');
    var searchyao = document.getElementById('searchyao');

    var selectedText = '';
    var isMenuVisible = false;
    var isYaoVisible = false;

    myDiv.addEventListener('mousedown', closeYao);
    myDiv.addEventListener('mousedown', closeimg);
    
    var closeYao = function(event) {
  	    if (!isYaoVisible) {
  	      return;
  	    }
  	    if (event.target === yao || yao.contains(event.target)) {
  	      return;
  	    }
  	    isYaoVisible = false;
  	    yao.style.display = 'none';
  	    document.removeEventListener('mousedown', closeYao);
    };
    var closeMenu = function(event) {
      if (!isMenuVisible) {
        return;
      }
      if (event.target === menu || menu.contains(event.target)) {
        return;
      }
      isMenuVisible = false;
      menu.style.display = 'none';
      document.removeEventListener('mousedown', closeMenu);
    };
    var closeimg = function() {
	    if (!isimgVisible) {
	      return;
	    }
	    
	    imgid='';
	    isimgVisible = false;
	    tuimg.style.display = 'none';
	    imgremark.value ='';
	    $('#img').val('');
	    showimg.setAttribute("src", '');
	    
	};
	 var closeBq = function() {
		    if (!isBqVisible) {
		      return;
		    }
		    
		    bqid='';
		    isBqVisible = false;
		    bq.style.display = 'none';
		    remark.value ='';
		    $('#zhengids2').val('');
		    $('#zhengnames2').val('');
		    $('#shownames2').val('');
		    
	  };
	  myDiv.addEventListener('mousedown', closeimg);
	  myDiv.addEventListener('mousedown', closeBq);
    myDiv.addEventListener('contextmenu', function(event) {
      event.preventDefault();
      var selection = window.getSelection();
      selectedText = selection.toString().trim();
      if (selectedText !== '') {
      	menu.style.left = event.pageX + 'px';
          menu.style.top = event.pageY + 'px';
          menu.style.display = 'block';
          isMenuVisible = true;
          document.addEventListener('mousedown', closeMenu);
      }
      
    });
    menu.addEventListener("mousedown", function(event) {
   	 if (event.buttons === 1) {
   	   event.preventDefault();
   	 }
    });
  //点击查询药菜单
    searchyao.addEventListener("click",function(event){
  	  var selection = window.getSelection();
  	  var yaost=selection.toString();
  	  if (yaost) {
  		  fetch('/book/getyao', {
  	          method: 'POST',
  	          headers: { 'Content-Type': 'application/json' },
  	          body: JSON.stringify({ 'yao':yaost })
  	      })
  	      .then(response => {
  	          if (!response.ok) {
  	            throw new Error('');
  	          }
  	          return response.json();
  	        })
  	        .then(data => {
  		        if(data.res=='ok'){
  			        var yaoja=data.data;
  			        var ht='';
  			        yaoja.forEach(function(num, index, array) {
  		        	    var o=array[index];
  		        	    var remark=o.remark;
  		        	    var content=o.content;
  		        	    var bookname=o.bookname;
  		        	    
  		        	    content=content.replace(new RegExp('@r@@n@', 'g'), '<br>');
  		        	    remark=remark.replace(new RegExp('@r@@n@', 'g'), '<br>');
  		        	    remark=remark.replace(new RegExp('@n@', 'g'), '<br>');
  		        	    
  		        	    ht+='<div class="container"><div class="title">'+bookname+'</div><div class="content" >'+content+'</div><div class="remark">备注：'+remark+'</div></div>';
  		        	    
  		           });
  			        yao.innerHTML=ht;
  			        yao.style.display = 'block';
  			        isYaoVisible = true;
  			        document.addEventListener('mousedown', closeYao);
  			    }else if(data.res=='nodata'){
  				    alert("没有找到药物");
  				}
  	          
  	        })
  	        .catch(error => {
  	          //console.error('', error);
  	        });
  	  }
    });

  //鼠标滑过img
    var oldimgtime=''
    function getimg(time,bookname,flag){
  	  if(isimgVisible==true&&oldimgtime==time){
  		  return;
        }
  	  imgid=time;
  	  
  	  tuimg.style.left = this.event.pageX + 'px';
  	  if(flag){
  		  tuimg.style.top = this.event.pageY-100+ 'px';
  	  }else{
  		  tuimg.style.top = this.event.pageY+ 'px';
  	  }
  	  
  	  tuimg.style.display = 'block';
        isimgVisible = true;
        oldimgtime=time;
        if(flag){
            return;
        }
        
  	  fetch('/book/getimg', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: encodeURIComponent(JSON.stringify({ time: time,bookname:bookname}))
        })
        .then(response => {
            if (!response.ok) {
              throw new Error('');
            }
            return response.json();
          })
          .then(data => {
            //console.log(data);
            var remarkst=data.remark;
            remarkst=remarkst.replace(new RegExp('@n@', 'g'), '\n');
            remarkst=remarkst.replace(new RegExp('@r@', 'g'), '');
            imgremark.value=remarkst;
            // 在这里对响应数据进行处理
            var type=data.type;
            var newsrc="/book/"+bookname+"/"+time+type;
            console.log(newsrc)
            showimg.setAttribute("src", newsrc);
          })
          .catch(error => {
            //console.error('', error);
          });
    }

  //鼠标滑过书签span
    var oldtime=''
    function getsq(time,bookname,flag){
  	  if(isBqVisible==true&&oldtime==time){
  		  return;
        }
  	  bqid=time;
  	  bq.style.left = this.event.pageX + 'px';
        bq.style.top = this.event.pageY+ 'px';
        bq.style.display = 'block';
        isBqVisible = true;
        oldtime=time;
        if(flag){
            return;
        }
        
  	  fetch('/book/getsq', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: encodeURIComponent(JSON.stringify({ time: time,bookname:bookname}))
        })
        .then(response => {
            if (!response.ok) {
              throw new Error('');
            }
            return response.json();
          })
          .then(data => {
            //console.log(data);
            var remarkst=data.remark;
            remarkst=remarkst.replace(new RegExp('@n@', 'g'), '\n');
            remarkst=remarkst.replace(new RegExp('@r@', 'g'), '');
            remark.value=remarkst;
            var ids=data.bqid;
            var names=data.bq;
            $('#zhengids2').val(ids);
            $('#zhengnames2').val(names);
            $('#shownames2').val(names.replace(new RegExp('@', 'g'), ' '));
            // 在这里对响应数据进行处理
          })
          .catch(error => {
            //console.error('', error);
          });
    }
    
  </script>
</body>
</html>
